<template>
	<view class="message">
		<view class="headerbox">
			<view class="header">
				<text>消息</text>
				<uni-icons type="notification" color="#fff" size="60rpx"></uni-icons>
			</view>
		</view>

		<view class="hotbox">
			<view class="hot">
				<view class="hoticon">
					<image src="" mode=""></image>
				</view>
				<view class="text">
					<view class="title">
						热招新岗位
					</view>
					<view class="new">
						19个新公司发布了新岗位
					</view>
				</view>
			</view>
			<uni-icons class="forward" type="forward" color="#b4b4b5" size="52rpx"></uni-icons>

		</view>
		<view class="list" v-if="sendList.length > 0">
			<view class="item" v-for="(list,index) in sendList" @click="toCall(list._id)">
				<image :src="list.companyInfo[0].logoUrl" mode=""></image>
				<view class="right">
					<view class="top">
						<view class="title">
							{{list.title}}
						</view>
						<!-- <view class="time">
							10:30
						</view> -->
					</view>
					<view class="reply">
						请问还在考虑找工作吗
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sendList: JSON.parse(localStorage.getItem("sendList")) || [],
			};
		},
		onShow() {
			this.sendList = JSON.parse(localStorage.getItem("sendList")) || []
		},

		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods:{
			toCall(id){
				uni.navigateTo({
					url: '/pages/call/call?workid=' + id
				});
			}
		}

	}
</script>

<style lang="scss">
	.message {
		.headerbox {
			height: 120rpx;
			background-color: #5eae52;

			.header {
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 30rpx;

				text {
					font-size: 48rpx;
					color: #fff;
				}
			}
		}

		.hotbox {
			padding: 30rpx 30rpx 0 30rpx;
			position: relative;

			.hot {
				padding: 20rpx 30rpx;
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				box-shadow: 0rpx 0rpx 12rpx 6rpx #f7f7f7;

				.hoticon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 30rpx;

					image {
						width: 80rpx;
						height: 80rpx;

						img {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}
				}

				.text {
					font-size: 32rpx;
					color: #000;

				}

				.new {
					font-size: 24rpx;
					color: #333;
					margin-top: 20rpx;
				}
			}

			.forward {
				position: absolute;
				top: 50%;
				right: 40rpx;
				transform: translate(0, -50%);
			}
		}

		.list {
			padding: 0rpx 30rpx;

			.item {
				display: flex;
				align-items: center;
				padding: 30rpx 0 30rpx 0;
				border-bottom: 4rpx solid #f4f4f4;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 40rpx;
				}

				.right {
					flex: 1;

					.top {
						display: flex;
						justify-content: space-between;

						.title {
							font-size: 32rpx;
							color: #000;
							font-weight: bold;
						}

						.time {
							font-size: 24rpx;
							color: #666;
							// transform: scale(0.9);
						}
					}

					.reply {
						width: 570rpx;
						font-size: 28rpx;
						color: #666;
						margin-top: 20rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
